import React from 'react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './ThingsDetail.scss'

const ThingsDetail = () => {
  const list = [
    {
      title: '娱乐',
      children: ['娱乐', '娱乐', '娱乐']
    },
    {
      title: '学习',
      children: ['娱乐', '娱乐']
    },
    {
      title: '+ 添加'
    }
  ]

  const goBack = () => {
    Taro.navigateBack()
  }

  return (
    <View className="thingsDetail">
      <View className="pageTitle">
        <Text onClick={goBack} className="goBack">{'<'}</Text>
        <View className="title">周末计划表</View>
      </View>

      <View className="tableList">
        {list.map((item, index) => (
          <View key={index} className="tableItem">
            <View className="title">{item.title}</View>
            {item.children && (
              <View className="tasks">
                {item.children.map((item1, index1) => (
                  <View key={index1} className="singleTask">
                    <Text>{item1}</Text>
                    <View className="task-icon"></View>
                  </View>
                ))}
              </View>
            )}
            {item.title !== '+ 添加' && <View className="add-btn">+ 添加</View>}
          </View>
        ))}
      </View>
    </View>
  )
}

export default ThingsDetail